<template>
  <div class="content">
    <h2>用血报销</h2>
    <div class="flex-center" style="margin-top: 30px">
      <div>用血类型</div>
      <el-radio-group v-model="type" @change="changeType">
        <el-radio :label="'本人用血'">本人用血</el-radio>
        <el-radio :label="'家属用血'">家属用血</el-radio>
      </el-radio-group>
    </div>
    <el-steps :active="active" style="margin-top: 30px">
      <el-step :title="item" v-for="item in steps"></el-step>
    </el-steps>
    <div class="form">
      <el-form
        v-if="steps[active - 1] === '献血者信息'"
        :model="form1"
        :rules="rules1"
        ref="form1"
        label-width="160px"
        class="demo-ruleForm"
      >
        <el-form-item label="身份证正反面照片" prop="idCardPics">
          <div v-if="form1.idCardPics.length" class="img-blocks">
            <div
              style="position: relative; width: 160px"
              v-for="(item, index) in form1.idCardPics"
            >
              <img :src="item" style="width: 160px" />
              <i @click="deleteImg(index)" class="el-icon-circle-close"></i>
            </div>
          </div>
          <el-upload
            v-if="form1.idCardPics.length < 2"
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传您的献血证照片" prop="bloodCardPic">
          <div v-if="form1.bloodCardPic">
            <div style="position: relative; width: 160px">
              <img :src="form1.bloodCardPic" style="width: 160px" />
              <i @click="deleteImg2()" class="el-icon-circle-close"></i>
            </div>
          </div>
          <el-upload
            v-if="!form1.bloodCardPic"
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="献血者姓名" prop="name">
          <el-input v-model="form1.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="cardNo">
          <el-input v-model="form1.cardNo"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form1.phone"></el-input>
        </el-form-item>
      </el-form>
      <el-form
        v-if="steps[active - 1] === '用血信息'"
        :model="form2"
        :rules="rules2"
        ref="form2"
        label-width="160px"
        class="demo-ruleForm"
      >
        <el-form-item label="用血者姓名" prop="useName">
          <el-input v-model="form2.useName"></el-input>
        </el-form-item>
        <el-form-item label="就诊医院" prop="useHospital">
          <el-input v-model="form2.useHospital"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="useCardNo">
          <el-input v-model="form2.useCardNo"></el-input>
        </el-form-item>
        <el-form-item label="住院号" prop="useZYH">
          <el-input v-model="form2.useZYH"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="usePhone">
          <el-input v-model="form2.usePhone"></el-input>
        </el-form-item>
        <el-form-item label="医院位置" prop="hospitalLocation">
          <el-input v-model="form2.hospitalLocation"></el-input>
        </el-form-item>
      </el-form>
      <el-form
        v-if="steps[active - 1] === '用血报销证明'"
        :model="form3"
        :rules="rules3"
        ref="form3"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-form-item label="发票编号" prop="invoice">
          <el-input v-model="form3.invoice"></el-input>
        </el-form-item>
        <el-form-item label="请上传用血发票照片" prop="invoicePic">
          <div v-if="form3.invoicePic">
            <div style="position: relative; width: 160px">
              <img :src="form3.invoicePic" style="width: 160px" />
              <i @click="deleteImg3()" class="el-icon-circle-close"></i>
            </div>
          </div>
          <el-upload
            v-if="!form3.invoicePic"
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess3"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="请上传输血记录单" prop="invoiceRecord">
          <div v-if="form3.invoiceRecord">
            <div style="position: relative; width: 160px">
              <img :src="form3.invoiceRecord" style="width: 160px" />
              <i @click="deleteImg4()" class="el-icon-circle-close"></i>
            </div>
          </div>
          <el-upload
            v-if="!form3.invoiceRecord"
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess4"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="请上传医保，新农合结算票" prop="yibao">
          <div v-if="form3.yibao">
            <div style="position: relative; width: 160px">
              <img :src="form3.yibao" style="width: 160px" />
              <i @click="deleteImg5()" class="el-icon-circle-close"></i>
            </div>
          </div>
          <el-upload
            v-if="!form3.yibao"
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess5"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="请上传出院记录" prop="outRecord">
          <div v-if="form3.outRecord">
            <div style="position: relative; width: 160px">
              <img :src="form3.outRecord" style="width: 160px" />
              <i @click="deleteImg6()" class="el-icon-circle-close"></i>
            </div>
          </div>
          <el-upload
            v-if="!form3.outRecord"
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess6"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-form
        v-if="steps[active - 1] === '银行卡信息'"
        :model="form4"
        :rules="rules4"
        ref="form4"
        label-width="160px"
        class="demo-ruleForm"
      >
        <el-form-item label="银行卡正反面照片" prop="bankCardPics">
          <div v-if="form4.bankCardPics.length" class="img-blocks">
            <div
              style="position: relative; width: 160px"
              v-for="(item, index) in form4.bankCardPics"
            >
              <img :src="item" style="width: 160px" />
              <i @click="deleteImg7(index)" class="el-icon-circle-close"></i>
            </div>
          </div>
          <el-upload
            v-if="form4.bankCardPics.length < 2"
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess7"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="借记卡卡号" prop="bankCardNo">
          <el-input v-model="form4.bankCardNo"></el-input>
        </el-form-item>
        <el-form-item label="开户人姓名" prop="bankCardUserName">
          <el-input v-model="form4.bankCardUserName"></el-input>
        </el-form-item>
        <el-form-item label="开户行名称号" prop="bankCardNameno">
          <el-input v-model="form4.bankCardNameno"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="bankPhone">
          <el-input v-model="form4.bankPhone"></el-input>
        </el-form-item>
        <el-form-item label="银行支行" prop="bankName">
          <el-input v-model="form4.bankName"></el-input>
        </el-form-item>
      </el-form>
      <el-form
        v-if="steps[active - 1] === '亲属关系证明'"
        :model="form5"
        :rules="rules5"
        ref="form5"
        label-width="220px"
        class="demo-ruleForm"
      >
        <el-form-item label="与献血者关系" prop="relationship">
          <el-select v-model="form5.relationship" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="请上传您的结婚证/户口本/单位，社区，派出所等关系证明"
          prop="relationshipPics"
        >
          <div v-if="form5.relationshipPics.length" class="img-blocks">
            <div
              style="position: relative; width: 160px"
              v-for="(item, index) in form5.relationshipPics"
            >
              <img :src="item" style="width: 160px" />
              <i @click="deleteImg10(index)" class="el-icon-circle-close"></i>
            </div>
          </div>
          <el-upload
            v-if="form5.relationshipPics.length < 2"
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess10"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div v-if="steps[active - 1] === '提交成功'">
        操作成功！报销编号：{{ expenseNo }}，请务必仔细阅读您所报销的机构发布的公告，留意报销信息留言和注意查看银行卡。
      </div>
    </div>
    <div v-if="steps[active - 1] === '亲属关系证明'" style="padding-left: 30%;">
      <el-checkbox v-model="checked"
        >我已阅读并同意<span class="link" @click="linkTo"
          >《无偿献血者临床用血费用减免亲属关系承诺书》</span
        ></el-checkbox
      >
    </div>
    <div class="btns">
      <el-button v-if="active === 1" size="mini" type="danger" @click="reset()"
        >重置</el-button
      >
      <el-button v-if="active > 1" size="mini" type="primary" @click="pre()"
        >上一步</el-button
      >
      <el-button
        v-if="active < steps.length - 1"
        size="mini"
        type="primary"
        @click="next()"
        >下一步</el-button
      >
      <el-button
        v-if="active === steps.length - 1"
        size="mini"
        type="primary"
        @click="submit()"
        >提交</el-button
      >
      <el-button
        v-if="active === steps.length"
        size="mini"
        type="primary"
        @click="complete()"
        >完成</el-button
      >
    </div>
    <el-dialog
      title="无偿献血者临床用血费用减免亲属关系承诺书"
      :visible.sync="isVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="modal-content">
        用血者姓名<span class="diy">{{form2.useName}}</span>，身份证号码：<span
          class="diy"
        >{{form2.useCardNo}}</span
        >，手机号：<span class="diy">{{form2.usePhone}}</span>，与用血者关系<span
          class="diy"
        >{{form5.relationship}}</span
        >亲属关系；献血者姓名<span class="diy">{{form1.name}}</span>，身份证号码：<span
          class="diy"
        >{{form1.cardNo}}</span
        >，手机号：<span class="diy">{{form1.phone}}</span
        >。以上情况满足《国家献血条例》第二十七条规定享受待遇的条件。本人郑重承诺：本次临床用血费用减免所提交的亲属关系承诺真实有效，因虚假关系导致国家财政经费流失的，由本人承担相应法律责任及后果。
      </div>
      <div class="date">日期：{{ createTime }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import { addExpense } from "../service";
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        let reg2 = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
        if (!reg2.test(this.form1.phone)) {
          callback(new Error('手机号不符合规则'));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      expenseNo: '',
      createTime: '',
      type: "本人用血",
      active: 1,
      isVisible: false,
      checked: false,
      steps: [],
      form1: {
        idCardPics: [],
        bloodCardPic: "",
        name: "",
        cardNo: "",
        phone: "",
      },
      form2: {
        useName: "",
        useHospital: "",
        useCardNo: "",
        useZYH: "",
        usePhone: "",
        hospitalLocation: "",
      },
      form3: {
        invoice: "",
        invoicePic: "",
        invoiceRecord: "",
        yibao: "",
        outRecord: "",
      },
      form4: {
        bankCardPics: [],
        bankCardNo: "",
        bankCardUserName: "",
        bankCardNameno: "",
        bankPhone: "",
        bankName: "",
      },
      form5: {
        relationship: "",
        relationshipPics: [],
      },
      steps1: [
        "献血者信息",
        "用血信息",
        "用血报销证明",
        "银行卡信息",
        "提交成功",
      ],
      options: ['父母', '配偶', '子女', '兄弟姐妹', '配偶父母'],
      steps2: [
        "献血者信息",
        "用血信息",
        "用血报销证明",
        "亲属关系证明",
        "银行卡信息",
        "提交成功",
      ],
      rules1: {
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        cardNo: [{ required: true, message: "不能为空", trigger: "blur" }],
        idCardPics: [{ required: true, message: "不能为空", trigger: "blur" }],
        bloodCardPic: [{ required: true, message: "不能为空", trigger: "blur" }],
        phone: [
          { required: true, validator: checkPhone, trigger: "blur" },
        ],
      },
      rules2: {
        useName: [{ required: true, message: "不能为空", trigger: "blur" }],
        useHospital: [{ required: true, message: "不能为空", trigger: "blur" }],
        useCardNo: [{ required: true, message: "不能为空", trigger: "blur" }],
        usePhone: [
          { required: true, validator: checkPhone, trigger: "blur" },
        ],
      },
      rules3: {
        invoice: [{ required: true, message: "不能为空", trigger: "blur" }],
        invoicePic: [{ required: true, message: "不能为空", trigger: "blur" }],
        invoiceRecord: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      rules4: {
        bankCardPics: [{ required: true, message: "不能为空", trigger: "blur" }],
        bankCardNo: [{ required: true, message: "不能为空", trigger: "blur" }],
        bankCardUserName: [{ required: true, message: "不能为空", trigger: "blur" }],
        bankCardNameno: [{ required: true, message: "不能为空", trigger: "blur" }],
        bankName: [{ required: true, message: "不能为空", trigger: "blur" }],
        bankPhone: [
          { required: true, validator: checkPhone, trigger: "blur" },
        ],
      },
      rules5: {
        relationship: [{ required: true, message: "不能为空", trigger: "blur" }],
        relationshipPics: [{ required: true, message: "不能为空", trigger: "blur" }],
      }
    };
  },
  methods: {
    complete() {
      this.active = 1;
      this.form1 =  {
        idCardPics: [],
        bloodCardPic: "",
        name: "",
        cardNo: "",
        phone: "",
      }
      this.form2 = {
        useName: "",
        useHospital: "",
        useCardNo: "",
        useZYH: "",
        usePhone: "",
        hospitalLocation: "",
      }
      this.form3 = {
        invoice: "",
        invoicePic: "",
        invoiceRecord: "",
        yibao: "",
        outRecord: "",
      }
      this.form4 = {
        bankCardPics: [],
        bankCardNo: "",
        bankCardUserName: "",
        bankCardNameno: "",
        bankPhone: "",
        bankName: "",
      }
      this.form5 = {
        relationship: "",
        relationshipPics: [],
      }
    },
    changeType() {
      console.log(this.type);
      if (this.active > 1 || (this.form1.idCardPics.legnth || this.form1.bloodCardPic || this.form1.name || this.form1.cardNo || this.form1.phone)) {
        this.$confirm('正在编辑中，是否重置并切换类型？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form1 =  {
            idCardPics: [],
            bloodCardPic: "",
            name: "",
            cardNo: "",
            phone: "",
          }
          this.form2 = {
            useName: "",
            useHospital: "",
            useCardNo: "",
            useZYH: "",
            usePhone: "",
            hospitalLocation: "",
          }
          this.form3 = {
            invoice: "",
            invoicePic: "",
            invoiceRecord: "",
            yibao: "",
            outRecord: "",
          }
          this.form4 = {
            bankCardPics: [],
            bankCardNo: "",
            bankCardUserName: "",
            bankCardNameno: "",
            bankPhone: "",
            bankName: "",
          }
          this.form5 = {
            relationship: "",
            relationshipPics: [],
          }
        })
      }
      
      this.steps = this.type === '本人用血' ? this.steps1 : this.steps2;
      this.active = 1;
    },
    handleAvatarSuccess(data) {
      this.form1.idCardPics.push(`http://127.0.0.1:3000/${data.imgName}`)
    },
    handleAvatarSuccess7(data) {
      this.form4.bankCardPics.push(`http://127.0.0.1:3000/${data.imgName}`)
    },
    handleAvatarSuccess10(data) {
      this.form5.relationshipPics.push(`http://127.0.0.1:3000/${data.imgName}`)
    },
    deleteImg(index) {
      this.form1.idCardPics.splice(index, 1)
    },
    deleteImg7(index) {
      this.form4.bankCardPics.splice(index, 1)
    },
    deleteImg10(index) {
      this.form5.relationshipPics.splice(index, 1)
    },
    handleAvatarSuccess2(data) {
      this.form1.bloodCardPic = `http://127.0.0.1:3000/${data.imgName}`
    },
    handleAvatarSuccess3(data) {
      this.form3.invoicePic = `http://127.0.0.1:3000/${data.imgName}`
    },
    handleAvatarSuccess4(data) {
      this.form3.invoiceRecord = `http://127.0.0.1:3000/${data.imgName}`
    },
    handleAvatarSuccess5(data) {
      this.form3.yibao = `http://127.0.0.1:3000/${data.imgName}`
    },
    handleAvatarSuccess6(data) {
      this.form3.outRecord = `http://127.0.0.1:3000/${data.imgName}`
    },
    deleteImg2() {
      this.form1.bloodCardPic = ''
    },
    deleteImg3() {
      this.form3.invoicePic = ''
    },
    deleteImg4() {
      this.form3.invoiceRecord = ''
    },
    deleteImg5() {
      this.form3.yibao = ''
    },
    deleteImg6() {
      this.form3.outRecord = ''
    },
    reset() {
      this.form1.idCardPics = []
      this.form1.bloodCardPic = '';
      this.form1.name = '';
      this.form1.phone = '';
      this.form1.cardNo = '';
    },
    next() {
      console.log(this.active)
      let index = this.active
      if (this.type === '家属用血' && this.active === 4) {
        index = 5
      }
      this.$refs[`form${index}`].validate((valid) => {
        if (valid) {
          if (this.active < this.steps.length) {
            this.active++
          }
        }
      });
    },
    pre() {
      this.active--
    },
    linkTo() {
      this.isVisible = true
      this.createTime = moment().format('YYYY年MM月DD日')
    },
    handleClose() {
      this.isVisible = false
    },
    submit() {
      if (this.type === '家属用血' && !this.checked) {
        this.$message.error('请先阅读承诺书并勾选')
        return
      }
      this.$refs['form4'].validate((valid) => {
        if (valid) {
          const randTag = function() {
              return ('0'.repeat(12) + parseInt(Math.pow(2, 40) * Math.random()).toString(32)).slice(-12);
          };
          let params = {
            ...this.form1,
            ...this.form2,
            ...this.form3,
            ...this.form4,
            type: this.type,
            status: '未核验',
            no: randTag(),
            createTime: moment().format('YYYY-MM-DD HH:mm:ss')
          }
          let params2 = JSON.parse(JSON.stringify(params))
          if (this.type === '家属用血') {
            params2 = {
              ...params2,
              ...this.form5
            }
            params2.relationshipPics = JSON.stringify(params2.relationshipPics)
          }
          
          params2.idCardPics = JSON.stringify(params2.idCardPics)
          params2.bankCardPics = JSON.stringify(params2.bankCardPics)
          console.log(params2)
          addExpense(params2).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.active++
              this.expenseNo = params2.no;
            }
          })
        }
      });
    }
  },
  created() {
    this.steps = this.steps1;
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 1200px;
  margin: 20px auto;
}
.flex-center {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.form {
  width: 60%;
  margin: 30px auto;
}

.el-icon-circle-close {
  position: absolute;
  top: -5px;
  right: -5px;
  cursor: pointer;
  color: red;
}
::v-deep .el-upload__input {
  display: none !important;
}
::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.img-blocks {
  display: flex;
  gap: 20px;
}

.btns {
  width: 200px;
  margin: 20px auto;
  display: flex;
  gap: 20px;
}
.link {
  color: #409eff;
}
.diy {
  font-weight: bold;
}
.date {
  float: right;
}
</style>
